<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天消息调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f9fafb;
        }
        
        .debug-panel {
            background: #1f2937;
            color: #f9fafb;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-family: monospace;
            font-size: 12px;
        }
        
        .debug-panel h3 {
            margin-top: 0;
            color: #60a5fa;
        }
        
        .message-debug {
            background: #374151;
            padding: 10px;
            border-radius: 4px;
            margin: 5px 0;
        }
        
        .chat-container {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            min-height: 400px;
        }
        
        .message {
            margin-bottom: 20px;
            border: 2px dashed transparent;
            padding: 5px;
            border-radius: 8px;
        }
        
        .message.debug-user {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }
        
        .message.debug-ai {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.1);
        }
        
        .message-content {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            max-width: 80%;
            position: relative;
        }
        
        .message.self .message-content {
            margin-left: auto;
            flex-direction: row-reverse;
        }
        
        .debug-label {
            position: absolute;
            top: -20px;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 4px;
            color: white;
        }
        
        .debug-label.user {
            background: #3b82f6;
            right: 0;
        }
        
        .debug-label.ai {
            background: #10b981;
            left: 0;
        }
        
        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
        
        .user-avatar {
            background: #1677ff !important;
            color: white;
        }
        
        .ai-avatar {
            background: #f3f4f6;
            color: #6b7280;
        }
        
        .bubble-container {
            position: relative;
            max-width: 480px;
        }
        
        .bubble {
            background: white;
            border-radius: 16px;
            padding: 12px 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border: 1px solid #e5e7eb;
        }
        
        .message.self .bubble {
            background: linear-gradient(135deg, #1677ff, #0958d9);
            color: white;
            border: none;
        }
        
        .content {
            font-size: 14px;
            line-height: 1.6;
            color: #374151;
        }
        
        .message.self .content {
            color: white;
        }
        
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background: #f3f4f6;
            border-radius: 8px;
        }
        
        button {
            padding: 8px 16px;
            margin: 5px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background: #1677ff;
            color: white;
        }
        
        button:hover {
            background: #0958d9;
        }
    </style>
</head>
<body>
    <h1>聊天消息布局调试</h1>
    
    <div class="debug-panel">
        <h3>调试信息</h3>
        <div id="debugInfo">等待消息...</div>
    </div>
    
    <div class="controls">
        <button onclick="addTestMessage(true)">添加用户消息 (isUser: true)</button>
        <button onclick="addTestMessage(false)">添加AI消息 (isUser: false)</button>
        <button onclick="clearMessages()">清空消息</button>
        <button onclick="testRealScenario()">模拟真实场景</button>
    </div>
    
    <div class="chat-container" id="chatContainer">
        <!-- 消息将在这里显示 -->
    </div>
    
    <script>
        let messageId = 1;
        let messages = [];
        
        function updateDebugInfo() {
            const debugDiv = document.getElementById('debugInfo');
            debugDiv.innerHTML = messages.map(msg => `
                <div class="message-debug">
                    <strong>消息 ${msg.id}:</strong><br>
                    isUser: ${msg.isUser}<br>
                    content: "${msg.content}"<br>
                    CSS类: ${msg.isUser ? '.message.self' : '.message'}<br>
                    预期位置: ${msg.isUser ? '右侧' : '左侧'}
                </div>
            `).join('');
        }
        
        function createMessage(content, isUser, characterName = '') {
            const message = {
                id: messageId++,
                content,
                isUser,
                characterName,
                timestamp: Date.now()
            };
            
            messages.push(message);
            
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'self debug-user' : 'debug-ai'}`;
            messageDiv.innerHTML = `
                <div class="message-content">
                    <div class="debug-label ${isUser ? 'user' : 'ai'}">
                        ${isUser ? 'USER' : 'AI'} (isUser: ${isUser})
                    </div>
                    <div class="message-avatar ${isUser ? 'user-avatar' : 'ai-avatar'}">
                        ${isUser ? 'U' : 'AI'}
                    </div>
                    <div class="bubble-container">
                        <div class="bubble">
                            ${!isUser && characterName ? `<div style="font-size: 12px; font-weight: 600; color: #1677ff; margin-bottom: 4px;">${characterName}</div>` : ''}
                            <div class="content">${content}</div>
                        </div>
                    </div>
                </div>
            `;
            
            return messageDiv;
        }
        
        function addTestMessage(isUser) {
            const userMessages = [
                "你好！",
                "今天天气怎么样？",
                "能帮我解释一下这个问题吗？",
                "谢谢你的帮助！"
            ];
            
            const aiMessages = [
                "你好！很高兴见到你。",
                "今天天气很不错，阳光明媚。",
                "当然可以！让我来为你详细解释一下。",
                "不客气！随时可以问我问题。"
            ];
            
            const characters = ['哈利·波特', '苏格拉底', '爱因斯坦'];
            
            const content = isUser 
                ? userMessages[Math.floor(Math.random() * userMessages.length)]
                : aiMessages[Math.floor(Math.random() * aiMessages.length)];
                
            const character = isUser ? '' : characters[Math.floor(Math.random() * characters.length)];
            
            const messageDiv = createMessage(content, isUser, character);
            document.getElementById('chatContainer').appendChild(messageDiv);
            
            updateDebugInfo();
            scrollToBottom();
        }
        
        function clearMessages() {
            document.getElementById('chatContainer').innerHTML = '';
            messages = [];
            messageId = 1;
            updateDebugInfo();
        }
        
        function testRealScenario() {
            clearMessages();
            
            // 模拟真实的聊天场景
            setTimeout(() => {
                // 用户发送 "hi"
                addTestMessage(true);
            }, 100);
            
            setTimeout(() => {
                // AI回复
                addTestMessage(false);
            }, 800);
            
            setTimeout(() => {
                // 用户再次发送消息
                addTestMessage(true);
            }, 1500);
            
            setTimeout(() => {
                // AI再次回复
                addTestMessage(false);
            }, 2200);
        }
        
        function scrollToBottom() {
            const container = document.getElementById('chatContainer');
            container.scrollTop = container.scrollHeight;
        }
        
        // 页面加载时运行测试
        window.onload = function() {
            testRealScenario();
        };
    </script>
</body>
</html>
